<template>
  <div class="MyCard">
    <div class="MyCard_cont">
      <p>
        剩余 <span>{{ card.cardNum - card.cardFeedNum }}</span
        >张卡
      </p>
    </div>
    <!-- 图标 -->
    <van-row class="MyCard_icon" gutter="10">
      <van-col span="12">
        <div class="MyCard_icon_item">
          <h2><img src="@/assets/MyCard_icon1.png" /> 总卡量</h2>
          <h2>{{ card.cardNum }}</h2>
        </div>
      </van-col>
      <van-col span="12">
        <div class="MyCard_icon_item">
          <h2><img src="@/assets/MyCard_icon.png" /> 送卡量</h2>
          <h2>{{ card.cardFeedNum }}</h2>
        </div>
      </van-col>
    </van-row>
    <!-- 提现列表 -->
    <h3 class="MyCard_title">已购卡</h3>
    <van-list
      v-if="show"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="MyCard_box"
    >
      <ul v-if="list.length > 0">
        <li class="MyCard_item" v-for="(item, index) in list" :key="index">
          <van-row>
            <van-col span="6">
              <img src="@/assets/MyCard.png" />
            </van-col>
            <van-col span="14">
              <div class="MyCard_item_name">
                <p>{{ item.cardNumber }}</p>
              </div>
            </van-col>
            <van-col span="4">
              <van-button
                type="primary"
                color="#D4B066"
                @click="shareData(item.cardNumber, item.cardPwd)"
                round
                block
                size="mini"
                >送卡</van-button
              >
            </van-col>
          </van-row>
        </li>
      </ul>
      <van-empty v-else />
    </van-list>
    <div class="button">
      <p>
        点击购卡就同意
        <span @click="$router.push('/agreement')">《购销合同》</span>
      </p>
      <van-button
        type="primary"
        color="#D2A166"
        @click="buyCard"
        round
        block
        size="normal"
        >立即购卡</van-button
      >
    </div>
    <div class="share" v-show="shareShow">
      <img @click="closeImg" src="@/assets/share.png" alt="" />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { cartType } from "@/types/types.ts";

import { Col, Row, List, Button, Toast, Empty, Dialog } from "vant";

Vue.use(Empty);
Vue.use(List);
Vue.use(Col);
Vue.use(Row);
Vue.use(Button);
@Component({})
export default class MyCard extends Vue {
  private form = {
    page: 1,
    size: 20,
    status: [0],
  };
  private shareShow = false;
  private list: cartType[] = [];
  private loading: boolean = false;
  private finished: boolean = false;
  private show = false;
  private card = {
    cardFeedNum: 0,
    cardNum: 0,
  };

  private mounted() {
    this.$common.setWxConfig(window.location.href).then((res: boolean) => {
      if (res) {
        this.$common.getAuthToken(this.getData);
      }
    });
  }
  private getData() {
    this.$post(`cardCollect`).then((res: any) => {
      if (res.code == 0) {
        this.card = res.data;
        this.show = true;
      }
    });
  }
  private onLoad() {
    this.$post(`cardList`, this.form).then((res: any) => {
      if (res.code == 0) {
        this.loading = false;
        this.list = this.list.concat(res.data.list);
        this.form.page += 1;
        if (res.data.list.length < 20) {
          this.finished = true;
        }
      }
    });
  }
  private buyCard() {
    let that = this;
    Dialog.alert({
      title: "温馨提示",
      message: "此次购卡100张",
      showCancelButton: true,
    })
      .then(() => {
        this.$post(`buyCard`, {
          num: 100,
        }).then((res: any) => {
          if (res.code == 0) {
            this.$wx.ready(() => {
              this.$wx.chooseWXPay({
                timestamp: res.data.wx.timestamp,
                nonceStr: res.data.wx.noncestr,
                package: res.data.wx.package,
                signType: res.data.wx.signType,
                paySign: res.data.wx.sign,
                success: function (res: any) {
                  if (res.errMsg == "chooseWXPay:ok") {
                    window.location.reload();
                  } else if (res.errMsg == "chooseWXPay:cancel") {
                    Toast.success("取消支付成功！");
                  } else if (res.errMsg == "chooseWXPay:fail") {
                    Toast.fail("支付失败！");
                  }
                },
              });
            });
          }
        });
      })
      .catch(() => {
        // on cancel
      });
  }
  // 核销卡
  private cardFeed(a: string) {
    this.$post(`cardFeed`, { cardNumber: a }).then((res: any) => {
      if (res.code == 0) {
        this.shareShow = true;
      }
    });
  }

  private closeImg() {
    this.shareShow = false;
  }
  private shareData(a: string, b: string) {
    let that = this;
    that.$wx.ready(function () {
      that.$wx.updateAppMessageShareData({
        title: "豪成生活馆卡分享",
        desc: "得到卡后购物有惊喜",
        link: `http://www.haocheng2020.com/merchantDetails/0?cardNumber=${a}&cardPwd=${b}`,
        imgUrl:
          "http://api.haocheng2020.com/upload/icon/27881608521587_.pic.jpg",
        success: function () {
          Toast.success(`分享成功`);
          that.cardFeed(a);
        },
      });
    });
  }
}
</script>

<style lang="scss" scoped>
.MyCard {
  width: 100%;
  padding: 30px 15px;
  box-sizing: border-box;
  .MyCard_cont {
    width: 100%;
    border-radius: 15px;
    background-image: url("~@/assets/myCard_bac.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 50px;
    box-sizing: border-box;
    p {
      font-size: 50px;
      font-weight: 300;
      color: #ffffff;
      text-align: center;
      line-height: 5;
      span {
        color: #dcb976;
      }
    }
  }
  .MyCard_icon {
    padding: 30px 0;
    .MyCard_icon_item {
      border-radius: 20px;
      border: 1px solid #cdcdcd;
      text-align: center;
      padding: 30px;
      box-sizing: border-box;
      h2 {
        font-size: 30px;
        font-weight: 300;
        color: #333333;
        line-height: 1.5;
        img {
          width: 40px;
          display: inline-block;
          vertical-align: text-bottom;
        }
      }
    }
  }
  .MyCard_title {
    font-size: 35px;
    line-height: 1.5;
    padding-left: 10px;
    border-left: 5px solid #b99267;
    box-sizing: border-box;
    font-weight: normal;
    margin: 20px 15px;
  }
  .MyCard_box {
    margin-bottom: 130px;

    ul {
      list-style: none;
      width: 100%;
      .MyCard_item {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        margin-bottom: 20px;
        img {
          width: 100%;
          height: 110px;
          display: block;
          border-radius: 10px;
        }
        .MyCard_item_name {
          width: 100%;
          padding-left: 20px;
          box-sizing: border-box;
          & > p {
            font-size: 28px;
            font-weight: 300;
            color: #343434;
            line-height: 110px;
          }
        }
        button {
          margin-top: 30px;
        }
      }
    }
  }

  .button {
    width: 100%;
    padding: 10px 30px;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    p {
      font-size: 24px;
      line-height: 2.5;
      color: #333;
      span {
        color: rgb(37, 7, 202);
      }
    }
    button {
      margin-bottom: 20px;
    }
  }
  .share {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    img {
      width: 100%;
      display: block;
    }
  }
}
</style>
